<template>
    <div class="mask">
        <div class="TMB-warp">
            <div class="titler">
                <span class="font-w fs16" style="font-weight: 700;">損傷登録</span>
                <i class="el-icon-close" @click="CloseTables"></i>
            </div>
            <div class="middle">
                <div class="selectBox">
                    <span style="margin-right: 8px;">損傷分類：</span>
                    <el-select v-model="damageType" :placeholder="$t('message.bhView.label.placeholderSearch')"
                        class="form-ipt" @change="selectFn">
                        <el-option v-for="item in Data.damageType" :key="item.code" :label="item.name"
                            :value="item.code"></el-option>
                    </el-select>
                    <span style="margin-right: 8px;margin-left: 16px;">材質分類：</span>
                    <el-select v-model="mtrType" :placeholder="$t('message.bhView.label.placeholderSearch')"
                        class="form-ipt" @change="selectFn">
                        <el-option v-for="item in Data.mtrType" :key="item.code" :label="item.name"
                            :value="item.code"></el-option>
                    </el-select>
                </div>
                <ux-grid class="ux-table" ref="singleTable" :data="Data.dataList" :header-cell-style="{
                    color: 'rgba(0, 0, 0, 0.85)',
                    fontSize: '14px',
                    textAlign: 'left',
                    fontWeight: 'bold',
                    padding: 0,
                    height: '32px',
                    background: 'rgb(244,245,246)'
                }" :cell-style="{
                    color: 'rgba(96,98,102,1)',
                    fontSize: '14px',
                    textAlign: 'left',
                    padding: 0,
                    // height: '32px',
                }" :checkbox-config="{
                    showHeader: false,
                }" @current-change="handleCurrentChange" highlight-current-row v-loading="loading"
                    element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
                    :element-loading-text="$t('message.bhView.loading')" height="500">
                    <template slot="empty"> No data </template>
                    <!-- <ux-table-column type="checkbox" width="40" align="center" title=""> </ux-table-column> -->
                    <ux-table-column property="label" align="center" title="損傷分類">
                        <template slot-scope="scope">
                            <p class="table-input">{{ scope.row.dmgClsName }}</p>
                        </template>
                    </ux-table-column>
                    <ux-table-column property="label" align="center" title="損傷名称" width="200">
                        <template slot-scope="scope">
                            <!-- <el-tooltip class="item" effect="dark" :content="scope.row.dmgName" placement="top-start"> -->
                            <p>{{ scope.row.dmgName }}</p>
                            <!-- </el-tooltip> -->
                        </template>
                    </ux-table-column>
                    <ux-table-column property="label" align="center" title="材質分類">
                        <template slot-scope="scope">
                            <p class="table-input">{{ scope.row.mtrCls }}</p>
                        </template>
                    </ux-table-column>
                    <ux-table-column property="label" align="center" :title="Label[3].dataVal">
                        <template slot-scope="scope">
                            <!-- <el-tooltip class="item" effect="dark" :content="scope.row.machanism" placement="top-start"> -->
                            <p class="table-input">{{ scope.row.machanism }}</p>
                            <!-- </el-tooltip> -->
                        </template>
                    </ux-table-column>
                    <ux-table-column property="label" align="center" :title="Label[4].dataVal">
                        <template slot-scope="scope">
                            <!-- <el-tooltip class="item" effect="dark" :content="scope.row.expPart" placement="top-start"> -->
                            <p class="table-input">{{ scope.row.expPart }}</p>
                            <!-- </el-tooltip> -->
                        </template>
                    </ux-table-column>
                    <ux-table-column property="label" align="center" :title="Label[5].dataVal">
                        <template slot-scope="scope">
                            <!-- <el-tooltip class="item" effect="dark" :content="scope.row.ispWayName"
                                placement="top-start"> -->
                            <p class="table-input">{{ scope.row.ispWayName }}</p>
                            <!-- </el-tooltip> -->
                        </template>
                    </ux-table-column>
                    <ux-table-column property="label" align="center" :title="Label[6].dataVal">
                        <template slot-scope="scope">
                            <!-- <el-tooltip class="item" effect="dark" :content="scope.row.exaFact" placement="top-start"> -->
                            <p class="table-input">{{ scope.row.exaFact }}</p>
                            <!-- </el-tooltip> -->
                        </template>
                    </ux-table-column>
                </ux-grid>
                <div class="footer">
                    <span></span>
                    <div>
                        <el-button type="" size="mini" @click="CloseTables">Cancel</el-button>
                        <el-button type="primary" size="mini" @click="okFn">OK</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { GetGetCauseOfInjuryList } from '@/api/api';
import _ from 'lodash-es';

export default {
    name: "RightTabelShow",
    props: ["PltCode", "Code", "Label", "DamList"],
    data() {
        return {
            Data: {
                damageType: [],
                dataList: [],
                mtrType: [],
            },
            DataClone: {
                damageType: [],
                dataList: [],
                mtrType: [],
            },
            damageType: 0,
            mtrType: 0,

            loading: false,

            handleRow: {},
        };
    },
    components: {},
    watch: {},
    methods: {
        //  多选框
        handleSelectionChange(e) {
            console.log(e);
        },
        //  ok按钮
        okFn() {
            if (!this.handleRow) {
                return
            }
            this.$emit('getAddRow', this.handleRow);
            this.$emit('hidden')
        },
        //  选择行
        handleCurrentChange(val) {
            console.log(val);
            this.handleRow = val;
        },
        //  关闭按钮
        CloseTables() {
            this.$emit('hidden')
        },
        checkCodeExists(code, objs) {
            for (let obj of objs) {
                if (obj.code === code) {
                    return true; // 如果找到匹配的code，返回true  
                }
            }
            return false; // 遍历完数组后未找到匹配的code，返回false  
        },
        // 筛选列表
        async selectFn() {
            await this.GetGetCauseOfInjuryListFn();
            // setTimeout(() => {
            this.loading = true;
            let n1 = this.Data.damageType.filter(item => item.code == this.damageType)[0].name.trim();
            let n2 = this.Data.mtrType.filter(item => item.code == this.mtrType)[0].name.trim();
            this.Data.dataList = this.DataClone.dataList.filter(item => {
                let r1 = n1 == '' ? true : item.dmgClsName == n1;
                let r2 = n2 == '' ? true : item.mtrCls == n2;
                return (r1 && r2)
            })
            this.loading = false;
            // }, 500);
        },
        //  获取列表
        async GetGetCauseOfInjuryListFn() {
            this.loading = true;
            this.Data = {
                damageType: [],
                dataList: [],
                mtrType: [],
            }
            let dataJson = {
                PltCode: this.PltCode,
                Code: this.Code,
                DamCode: this.damageType,
                ClsCode: this.mtrType,
                DamList: this.DamList.length != 0 ? this.DamList : null
            }
            let res = await GetGetCauseOfInjuryList(dataJson);
            this.loading = false;
            if (res.data.code != 0) {
                this.handleRow = null;
                this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
                return
            }
            // this.Data = res.data.data;
            this.Data = _.cloneDeep(res.data.data);
            this.DataClone = _.cloneDeep(res.data.data);
            if (!this.checkCodeExists(this.damageType, this.Data.damageType)) {
                this.damageType = this.Data.damageType[0].code;
            }
            if (!this.checkCodeExists(this.mtrType, this.Data.mtrType)) {
                this.mtrType = this.Data.mtrType[0].code;
            }
            if (this.Data.dataList.length != 0) {
                this.handleRow = this.Data.dataList[0];
                this.$refs.singleTable.setCurrentRow(this.handleRow);
            }

        },
    },
    created() { },
    mounted() {
        this.GetGetCauseOfInjuryListFn();
    },
    beforeDestroy() { },
    destroyed() { },
    updated() {

    },
};
</script>
<style lang="scss" scoped>
.mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;


}

.TMB-warp {
    width: 1000px;
    background: rgb(255, 255, 255);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
        0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);
    z-index: 100;

    .titler {
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 24px;
        border-bottom: 1px solid #F0F0F0FF;

        i {
            cursor: pointer;
        }
    }

    .middle {
        padding: 13px 24px;

        .selectBox {
            padding: 0 0 16px 0;
            display: flex;
            align-items: center;
        }

        .title {
            display: flex;
            margin-bottom: 13px;

            .seach {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                border: 1px solid #d9d9d9;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                margin-right: 12px;
            }

            .form-ipt {
                height: 24px;

                ::v-deep .el-input__inner {
                    width: 197px;
                    height: 24px;
                    background: #fff;
                }
            }
        }

        ::v-deep .ux-table * {
            border: none;
        }

        ::v-deep .elx-table {
            border: 1px solid #00000026;
        }

        .table {
            border-bottom: 1px solid red !important;
        }

        .footer {
            // height: 43px;
            // background-color: #EDEEEFFF;
            // border: 1px solid #00000026;
            // border-top: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            // padding: 0 4px;
            margin-top: 15px;

            .el-button {
                width: 80px !important;
            }
        }

        p {
            text-align: center;
            word-wrap: break-word;
            white-space: normal;
        }
    }

    .form-ipt {
        width: 200px;
        height: 24px;

        ::v-deep .el-input__inner {
            height: 24px;
            background: #fff;
        }

        ::v-deep .el-input__icon {
            line-height: 24px;
        }
    }
}
</style>
